import React, { Component } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const getItems = (): any => {
    const itemsArr = [
        {
            "id": "1",
            "content": "1"
        },
        {
            "id": "2",
            "content": "2"
        },
        {
            "id": "3",
            "content": "3"
        }
    ]
    return itemsArr
}



// 重新记录数组顺序
const reorder = (list: any, startIndex: number, endIndex: number) => {
    const result = Array.from(list);
    //删除并记录 删除元素
    const [removed] = result.splice(startIndex, 1);
    //将原来的元素添加进数组
    result.splice(endIndex, 0, removed);
    return result;
};

const grid = 8;


// 设置样式
const getItemStyle = (isDragging: boolean, draggableStyle?: any) => ({
    // some basic styles to make the items look a bit nicer
    userSelect: "none",
    padding: grid * 2,
    margin: `0 ${grid}px 0 0 `,
    width: '200px',
    height: '300px',
    marginLeft: '200px',
    // 拖拽的时候背景变化
    background: isDragging ? "lightgreen" : "#ffffff",

    // styles we need to apply on draggables
    ...draggableStyle
});

const getListStyle = () => ({
    background: 'black',
    display: 'flex',
    padding: grid,
    overflow: 'auto',
    marginTop: '64px',
    marginLeft: '100px'
});


class ReactBeautifulDndHorizontal extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            items: getItems()
        };
        this.onDragEnd = this.onDragEnd.bind(this)
    }

    public onDragEnd (result: any) {
        if (!result.destination) {
            return;
        }
        console.log(result)
        const items = reorder(
            this.state.items,
            result.source.index,
            result.destination.index
        );

        this.setState({
            items
        });
    }
    public renderDragWrap(items: any) {
        return (
            <div style={{display:"flex"}}>
                {items.map((item: any, index: number) => {
                    return (
                        <Draggable key={item.id} draggableId={item.id} index={index}>
                            {(provided, snapshot) => (
                                <div
                                    ref={provided.innerRef}
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                    style={getItemStyle(
                                        snapshot.isDragging,
                                        provided.draggableProps.style
                                    )}
                                >
                                    {item.content}
                                </div>
                            )}
                        </Draggable>
                    )
                })}
            </div>
        )
    }

    render() {
        return (
            <DragDropContext onDragEnd={this.onDragEnd}>
                <Droppable droppableId="droppable" direction="horizontal">
                    {(provided, snapshot) => (
                        <div
                            {...provided.droppableProps}
                            ref={provided.innerRef}
                            style={getListStyle()}
                        >
                            {this.renderDragWrap(this.state.items)}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        )
    }
}

export default ReactBeautifulDndHorizontal